<template>
  <div class="yeepay-wrapper">
    <div class="main-bd">
      <template v-if="type != 16">
        <Tabs @on-click="handleTab">
          <TabPane label="支付渠道" name="channel">
            <div class="content-wrap">
              <Table
                border
                :columns="payColumns"
                :data="payList"
                :loading="payLoading">
              </Table>
            </div>
          </TabPane>
          <TabPane label="账户列表" name="investor">
            <div class="content-wrap">
              <div class="investor-head">
                <Button type="primary" @click="handleRecord(-1)">全部交易记录</Button>
              </div>
              <Table
                border
                :columns="ivColumns"
                :data="ivList"
                :loading="ivLoading"
              >
              </Table>
            </div>
          </TabPane>
        </Tabs>
      </template>
      <template v-if="type == 16">
        <Spin fix v-if="spinShow"></Spin>
        <div class="content-wrap">
          <div class="yeepay-account">
            <h2 class="title">账户信息</h2>
            <Row>
              <Col span="8">当前余额：{{ result.balanceAmount }}元</Col>
            </Row>
          </div>
          <div class="statement">
            <h2 class="title">账户流水</h2>
            <Table
              style="margin-bottom: 15px;"
              border
              :columns="ivColumns2"
              :data="ivList2.list"
              :loading="ivLoading2"
            >
            </Table>
            <div class="page-wrapper">
              <Page
                :total="ivList2.size"
                :current.sync="page"
                :page-size-opts="[10, 20, 40, 80, 100]"
                show-total
                show-elevator
                show-sizer
                @on-change="handleCurrentChange"
                @on-page-size-change="handleSizeChange"></Page>
            </div>
          </div>
        </div>
      </template>
    </div>

    <record-modal
      :title="title1"
      :id="investorId1"
      v-model="modal1"
    ></record-modal>

    <recharge-modal
      :id="investorId2"
      :title="title2"
      v-model="modal2"
      @ok="handleRechargeOk"
    ></recharge-modal>

    <offline-record
      v-model="modal3"
    ></offline-record>

  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { repayChannel } from '@/static/constant';
  import { dateFormat, thousandsFormat, isEmpty } from '@/static/tools';
  import recordModal from './components/record-modal.vue';
  import rechargeModal from './components/recharge-modal.vue';
  import offlineRecord from './components/offline-record.vue';

  export default {
    name: 'payAccount',
    data () {
      return {
        spinShow: true,
        result: {},
        ivColumns: [
          { title: '客户名称', key: 'name', align: 'center' },
          { title: '支付渠道', key: 'payChannelName', align: 'center' },
          {
            title: '总金额',
            key: 'balance',
            align: 'center',
            render: (h, params) => {
              const { balance } = params.row;
              let value = isEmpty(balance) ? '' : thousandsFormat(parseFloat(balance));
              return h('span', value);
            }
          },
          {
            title: '可支用金额',
            key: 'withDrawBalance',
            align: 'center',
            render: (h, params) => {
              const { withDrawBalance } = params.row;
              let value = isEmpty(withDrawBalance) ? '' : thousandsFormat(parseFloat(withDrawBalance));
              return h('span', value);
            }
          },
          {
            title: '在贷金额',
            key: 'loanAmount',
            align: 'center',
            renderHeader: (h, params) => {
              return  h('span', [
                h('Tooltip', {
                  props: {
                    transfer: true,
                    content: '逾期三天内未还的合同金额'
                  }
                }, [
                  h('span', '在贷金额'),
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle',
                      size: 14
                    },
                    style: {
                      marginTop: '-2px',
                      verticalAlign: 'middle'
                    }
                  })
                ])
              ])
            },
            render: (h, params) => {
              const { loanAmount } = params.row;
              let value = isEmpty(loanAmount) ? '' : thousandsFormat(parseFloat(loanAmount));
              return h('span', value);
            }
          },
          {
            title: '预计回款',
            key: 'estimateRepayAmount',
            align: 'center',
            renderHeader: (h, params) => {
              return  h('span', [
                h('Tooltip', {
                  props: {
                    transfer: true,
                    content: '根据最近的逾期率动态计算'
                  }
                }, [
                  h('span', '预计回款'),
                  h('Icon', {
                    props: {
                      type: 'ios-help-circle',
                      size: 14
                    },
                    style: {
                      marginTop: '-2px',
                      verticalAlign: 'middle'
                    }
                  })
                ])
              ])
            },
            render: (h, params) => {
              const { estimateRepayAmount } = params.row;
              let value = isEmpty(estimateRepayAmount) ? '' : thousandsFormat(parseFloat(estimateRepayAmount));
              return h('span', value);
            }
          },
          {
            title: '累计充值金额',
            key: 'totalRechargeAmount',
            align: 'center',
            render: (h, params) => {
              const { totalRechargeAmount } = params.row;
              let value = isEmpty(totalRechargeAmount) ? '' : thousandsFormat(parseFloat(totalRechargeAmount));
              return h('span', value);
            }
          },
          {
            title: '当前状态',
            key: 'status',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.status === 0 ? '上架' : '下架');
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const { id, name } = params.row;
              if (id != 0) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'success',
                      size: 'small'
                    },
                    style: {
                      marginRight: '10px'
                    },
                    on: {
                      click: () => {
                        this.handleRecharge(id, name);
                      }
                    }
                  }, '充值 | 提现')
                ]);
              }
            }
          }
        ],
        ivList: [],
        ivLoading: false,
        investorId1: -1,
        modal1: false,
        title1: '',
        investorId2: -1,
        modal2: false,
        title2: '',
        ivColumns2: [
          {
            title: '时间',
            key: 'ctime',
            align: 'center',
            render: (h, params) => {
              return h('span', dateFormat(params.row.ctime, 'year'));
            }
          },
          {
            title: '金额（元）',
            key: 'chargeAmount',
            align: 'center',
            render: (h, params) => {
              const { chargeAmount } = params.row;
              let amount = (parseFloat(chargeAmount) / 100).toFixed(2);
              return h('span', amount > 0 ? `+${amount}` : amount);
            }
          },
          {
            title: '类型',
            key: 'type',
            align: 'center',
            render: (h, params) => {
              const { type } = params.row;
              return h('span', type === 1 ? '充值' : type === 2 ? '提现' : '还款自动划转' );
            }
          },
          {
            title: '方式',
            key: 'rechargeWay',
            align: 'center',
            render: (h, params) => {
              const { rechargeWay } = params.row;
              let way = '';
              if (rechargeWay == 0) {
                way = '银行卡';
              } else if (rechargeWay == 1) {
                way = '支付宝';
              } else if (rechargeWay == 2) {
                way = '微信';
              } else {
                way = '后台操作';
              }
              return h('span', way);
            }
          }
        ],
        ivList2: [],
        ivLoading2: false,
        page: 1,
        pageSize: 10,
        modal3: false,
        payList: [],
        payColumns: [
          { title: '客户号', key: 'customerNo', align: 'center' },
          {
            title: '支付渠道',
            align: 'center',
            render: (h, params) => {
              const { channelNo } = params.row;
              return h('span', repayChannel[channelNo]);
            }
          },
          {
            title: '总金额',
            align: 'center',
            render: (h, params) => {
              const { balance } = params.row;
              let value = '';

              if (balance != null) {
                value = thousandsFormat(balance)
              }
              return h('span', value);
            }
          },
          {
            title: '可支付金额',
            key: 'withdrawBalance',
            align: 'center',
            render: (h, params) => {
              const { withdrawBalance } = params.row;
              let value = '';

              if (withdrawBalance !== null) {
                value = thousandsFormat(withdrawBalance);
              }
              return h('span', value);
            }
          }
        ],
        payLoading: true
      }
    },
    created () {
      if (this.type == 16) {
        this.getYeepayBalance();
        this.getInvestorRechargeList();
      } else {
        this.getPayChannelList();
      }
    },
    computed: {
      ...mapGetters([
        'type'
      ])
    },
    methods: {
      getYeepayBalance () {
        // yeepay account
        this.$http.post('/helsinki/admin/finance/getYibaoBalance')
        .then(({ body: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.result = data;
          }
          this.spinShow = false;
        }, err => {});
      },
      //获取支付渠道列表
      getPayChannelList() {
        this.payLoading = true;
        this.$http.get('/helsinki/admin/finance/getPayChannelList')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            // console.log(huichao);
            this.payList = data;
          }
          this.payLoading = false;
        }, err => {});
      },
      // type为16，获取当前直投客户充值记录列表
      getInvestorRechargeList () {
        this.ivLoading2 = true;
        this.$http.post('/helsinki/admin/investor/rechargeList', {
          page: this.page,
          pageSize: this.pageSize
        })
        .then(({ body: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.ivList2 = data;
          }
          this.ivLoading2 = false;
        }, err => {
          this.ivLoading2 = false;
        });
      },
      // tab 切换事件
      handleTab (name) {
        if (name === 'channel') {
          this.getPayChannelList();
        } else {
          this.getInvestorList();
        }
      },
      // 直投客户列表
      getInvestorList () {
        this.ivLoading = true;
        this.$http.post('/helsinki/admin/investor/financeList')
        .then(({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.ivList = data.list;
          }
          this.ivLoading = false;
        }, error => {
          console.log(error);
        });
      },
      // 点击 全部交易记录按钮
      handleRecord (value) {
        this.investorId1 = Number(value);
        this.title1 = '全部交易记录';
        this.modal1 = true;
      },
      // 充值 | 提现
      handleRecharge(id, name) {
        this.investorId2 = id;
        this.title2 = `${name} 【充值 | 提现】`
        this.modal2 = true;
      },
      // 充值弹窗 ok 函数
      handleRechargeOk () {
        this.modal2 = false;
        this.getInvestorList();
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.page = val;
        this.getInvestorRechargeList();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.pageSize = val;
        this.getInvestorRechargeList();
      },
      // 线下打款记录
      handleOffline () {
        this.modal3 = true;
      }
    },
    components: {
      recordModal,
      rechargeModal,
      offlineRecord
    }
  }
</script>

<style lang="scss" socped>
  .ivu-table {
    table, .table {
      border: none;
    }
  }

  .yeepay-wrapper {
    position: relative;
    padding-top: 15px;
    label {
      margin-bottom: 0;
    }

    textarea.ivu-input {
      font-size: 12px;
    }

    .title {
      margin-bottom: 12px;
      font-size: 15px;
      line-height: 24px;
    }

    .yeepay-account {
      margin-bottom: 32px;
    }

    .fruit-account {
      margin-bottom: 32px;
    }

    .pay-form {
      max-width: 480px;
    }

    .investor-head {
      margin-bottom: 15px;
      text-align: right;
    }

    .page-wrapper {
      text-align: right;
    }
  }
</style>

